import React from "react";
import {Cell, CountDown, Tag} from "react-vant";
import EmptyPage from "../EmptyPage";

interface Course {
  // 课程名
  "CourseName": string
  // 作业名
  "HWName": string;
  // 结束日期
  "EndDate": string;
  // 已提交
  "IsSubmit": string;
  // 逾期
  "OverDue": string;
}

interface OnlineTest {
  CourseName: string;
  Name: string;
  CreateName: string;
  EndDate: string;
  Status: string;
  StatusUpdateDate: string;
}

interface Props {
  jobs: Array<Course | OnlineTest>;
}

const Overdue: React.FC<Props> = (props) => {
  const {jobs} = props;

  const Timer = (course: Course | OnlineTest) => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const {EndDate, Status, StatusUpdateDate} = course;

    return (
      <div>{
        Status == '-1' ?
          <CountDown time={Number(Number(new Date()) - Number(new Date(StatusUpdateDate)))} autoStart={false}
                     format="DD 天 HH 时 mm 分 ss 秒"/> :
          <CountDown time={Number(Number(new Date()) - Number(new Date(EndDate)))} autoStart={false}
                     format="DD 天 HH 时 mm 分 ss 秒"/>
      }
        <Tag type={"danger"}>{"已经逾期，不允许提交"}</Tag>
      </div>
    )
  }
  return (
    <>
      {
        jobs.length ?
          <Cell.Group card style={{width: '100%'}}>
            <Cell></Cell>
            <Cell></Cell>
            {jobs?.map((course, i) => (
              <Cell key={i} title={"HWName" in course ? course.HWName : course.Name} value={course.CourseName}
                    label={<Timer {...course}/>}
                    style={{backgroundColor: "#f7f9fd"}}
              />
            ))}
            <Cell></Cell>
            <Cell></Cell>
          </Cell.Group> : <EmptyPage/>
      }
    </>
  )
}

export default Overdue;
